import { Image } from '@tarojs/components'
import { Swiper, SwiperItem } from '@nutui/nutui-react-taro'
import React from 'react'
import './index.less'

export interface ImageCarouselImage {
  /** 图片地址 */
  src: string
  /** 图片描述 */
  alt?: string
}

export interface ImageCarouselProps {
  /** 图片列表 */
  images: ImageCarouselImage[] | string[]
  /** 轮播高度 */
  height?: string | number
  /** 是否自动播放 */
  autoPlay?: boolean
  /** 是否循环播放 */
  loop?: boolean
  /** 自动播放间隔（毫秒） */
  interval?: number
  /** 是否显示指示器 */
  showIndicators?: boolean
  /** 图片模式 */
  mode?: 'scaleToFill' | 'aspectFit' | 'aspectFill' | 'widthFix'
  /** 自定义类名 */
  className?: string
  /** 图片点击事件 */
  onImageClick?: (index: number) => void
}

/**
 * ImageCarousel 图片轮播组件
 * 用于展示图片轮播
 */
const ImageCarousel: React.FC<ImageCarouselProps> = ({
  images,
  height = '256px',
  autoPlay = true,
  loop = true,
  interval = 3000,
  showIndicators = true,
  mode = 'aspectFill',
  className = '',
  onImageClick,
}) => {
  // 标准化图片数据
  const normalizedImages: ImageCarouselImage[] = images.map((img) =>
    typeof img === 'string' ? { src: img } : img
  )

  const handleImageClick = (index: number) => {
    if (onImageClick) {
      onImageClick(index)
    }
  }

  return (
    <Swiper
      className={`image-carousel ${className}`}
      autoPlay={autoPlay ? interval : 0}
      loop={loop}
      height={height}
      indicator={showIndicators}>
      {normalizedImages.map((image, index) => (
        <SwiperItem key={index}>
          <Image
            src={image.src}
            className='carousel-image'
            mode={mode}
            onClick={() => handleImageClick(index)}
          />
        </SwiperItem>
      ))}
    </Swiper>
  )
}

export default ImageCarousel

